<template>
  <div class="communityCard">
    <div class="mainBody">
      <div class="header">
        <img :src="images.headerImg" alt class="headerImg" />
        <p class="name">{{ cardInfo.name }}</p>
      </div>
      <div class="listBody">
        <div class="infoListBox">
          <div class="title">身份证</div>
          <div class="value">{{ cardInfo.idCard }}</div>
        </div>
        <div class="infoListBox">
          <div class="title">电话</div>
          <div class="value">{{ cardInfo.phone }}</div>
        </div>
        <div class="infoListBox">
          <div class="title">住址</div>
          <div class="value">{{ cardInfo.address }}</div>
        </div>
        <div class="infoListBox">
          <div class="title">街坊贡献</div>
          <div class="value fraction">{{ cardInfo.fraction }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: {
        headerImg:
          this.slow.userInfo.headImgUrl ||
          "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2671405889,3132669299&fm=26&gp=0.jpg"
      },

      cardInfo: {
        name: this.slow.userInfo.nickname || "姓名",
        idCard: "342626199510164919",
        phone: this.slow.userInfo.phone || "18112937126",
        address: this.slow.userInfo.rid || "河口市黄河路128号",
        fraction: ""
      }
    };
  },
  created() {
    this.post("/account/getAccountIntegra", {
      userId: this.slow.userInfo? this.slow.userInfo.openId: "8a4c60a170ec39780170f0759f720069",
      wxId: this.slow.userInfo? this.slow.userInfo.openId: "8a4c60a170ec39780170f0759f720069"
      //  wxId:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
    }).then(r => {
      this.cardInfo.fraction = r.map["积分"];
    });
  }
};
</script>
<style lang="scss" scoped>
.communityCard {
  padding: 50px 8%;
  background: #6a9965;
  .mainBody {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-image: url("../../assets/communityCard/cardBack.png");
    background-repeat: no-repeat;
    background-size: 84% 100%;

    .header {
      margin: 10% 12% 0 0;

      display: flex;
      flex-direction: column;
      align-items: center;

      .headerImg {
        height: 70px;
        width: 70px;
        display: block;
        border-radius: 50%;
      }
    }

    .listBody {
      margin: 0 12% 0 0;

      display: flex;
      flex-direction: column;
      align-items: center;
      .infoListBox {
        margin: 28% 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          color: #7e7e7e;
        }
        .value {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        .fraction {
          color: rgb(248, 148, 76);
        }
      }
    }
  }
}
</style>